<script setup lang="ts">
import { useRouter } from 'vue-router';
import type {iPro} from '@/type/home'
import { ref,computed } from 'vue';

// 组合式api父传子 props使用通过defineProps
    const {proList} =defineProps({
        proList:Array<iPro>
    })
    const iconType=ref('qr')

//计算属性监听 iconType 的变化来实现类型的切换
const classType =computed(()=>{
    return iconType.value=='qr' ? 1:2
})

//跳转商品详情页面

/*
    路由跳转的时候传参方法有两种
    第一种：query
        1. 跳转页面的时候可以配置一个 query 对象 router.push({ path: '', query :{} })]
        2. query 是一个对象，所以传参的数量没有限制
        3. 在进入的页面可以通过 useRoute 进行接收
        const route = useRoute()
        route.query.proid

    第二种：params
        1. 在路由规则中配置 path: '/detail/:proid' 先配置中添加参数
        2. 跳转页面的时候携带拼接参数 path: '/detail/' + proid
        3. 在进入到的页面 通过 useRoute 进行接收
        const route = useRoute()
        route.params.proid


*/
// 向商品详细页面传递 proid 这一个参数
const router=useRouter()
function goDetailClick(proid:string){
    console.log(proid);
    router.push({
        path:'/prodetail/'+proid,
        query:{
            proid
        }
    })
}

</script>

<template>
    <!-- 
        cols_1为左图右文
        cols_2为上图下文
     -->
    <ul :class="'proList  cols_'+classType"> 
        <li @click="goDetailClick(item.proid)" class="proItem" v-for="item in proList" :key="item.proid">

            <!-- 图片 -->
            <div class="itemImage">
                <van-image :style="{width:'100%', height:'100%'}"   :src="item.img1" />
            </div>    

            <!-- 文字 -->
            <div class="itemInfo">
                <!-- 标题 -->
                <div class="proname van-multi-ellipsis--l2">{{item.proname}}</div>

                <!-- 价格 -->
                <div class="price">
                    <span style="color: red">价格 ￥ {{ (item.originprice*item.discount/10).toFixed(2) }} </span>
                    <br>
                    <del style="color: gray;">原价 ￥ {{ item.originprice.toFixed(2) }}</del>
                </div>
            </div>
        </li>


         <!-- 切换商品显示 -->
        <div class="changetype" @click="iconType=iconType == 'qr' ? 'list-switch' : 'qr'">
            <van-icon size="35" :name="iconType" />
        </div>
    </ul>

   
   

</template>

<style scoped lang="scss">

    //.cols_1左图右文
    .cols_1 .proItem{
        height: 1rem;
        display: flex;
        border: 1px solid #f66;


        .itemImage{
            width: 1rem;
            height: 1rem;
            padding: 5px;
            box-sizing: border-box;

        }
        .itemInfo{
            flex: 1;
            padding:5px 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }

    // .cols_2 上图下文
    .cols_2{
        display: flex;
        flex-wrap: wrap;


        .proItem{
            width: 48%;
            margin: 3px  1%;
            border: 1px solid #f66;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .itemImage{
                height: 2rem;

            }

            .itemInfo{
                line-height: 22px;
                padding:5px 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    
    .changetype{
        position:fixed;
        right: 20px;
        bottom:60px;
        background-color: white;
        border-radius: 50%;
        border: 1px solid #f66;
        padding:5px
    }
</style>